<template>
  <div id="app">
    <div class="menus">
      <router-link to="/MenusTypes">菜单</router-link>

      <router-link to="/Transition">转换</router-link>
      <router-link to="/T2">转换2</router-link>
    </div>
    <!-- 使用动态的 transition name -->
    <!--mode="in-out"-->
    <transition name="fade" >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>


<style>
  /*.fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
    -webkit-transform: translateY(20px);
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
    -webkit-transform: translateY(0);
  }*/

  .fade-enter-active{
    animation: fade-in .5s;
  }

  .fade-leave-active {
    animation: fade-out .5s;
  }

  @keyframes fade-in {
    0% {
      transform: translateY(40px);
      opacity:0;
    }
    50% {
      transform: translateY(20px);
      opacity:0.2;
    }
    100% {
      transform: translateY(0);
      opacity:1;
    }
  }

  @keyframes fade-out {
    0% {
      transform: translateY(20px);
      opacity:1;
    }
    100% {
      transform: translateY(60px);
      opacity:0;
    }
  }

  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-out .5s;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes bounce-out {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(0);
    }
  }

  .menus a {
    display: inline-block;
    width: 100px;
    text-decoration: none;
    font-weight: bold;
    background: indianred;
    text-align: center;
    padding: 5px 0;
    color: wheat;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    transition: 1s .2s letter-spacing ease;
  }

  .menus a:hover {
    letter-spacing: 10px;
  }
</style>
